<template>
  <div class="loadMask">
    <div class="load-btns">
      <div class="load-btn load-btn1"></div>
      <div class="load-btn load-btn2"></div>
      <div class="load-btn load-btn3"></div>
      <div class="load-btn load-btn4"></div>
      <div class="load-btn load-btn5"></div>
      <div class="load-btn load-btn6"></div>
      <div class="load-btn load-btn7"></div>
      <div class="load-btn load-btn8"></div>
    </div>
    <div class="load-text">
      <span>正</span>
      <span>在</span>
      <span>加</span>
      <span>载</span>
      <span>中</span>
      <span>·</span>
      <span>·</span>
      <span>·</span>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  methods: {
    initLoad() {
      this.$('.load-btn').css({
        left: '50%'
      })
    },
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow: function() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">

@keyframes mymove {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes mymovereserve {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* 调整跳跃高度 */
  }
}
.loadMask {
  width: 750rpx;
  height: calc(100vh - 44px);
  background: #000;
  .load-btns {
    width: 350rpx;
    height: 350rpx;
    border-radius: 50%;
    background: #fff;
    margin: 250rpx auto 100rpx;
    position: relative;
    animation: mymove 4s linear infinite;
    .load-btn {
      width: 50rpx;
      height: 50rpx;
      position: absolute;
      animation: mymovereserve 4s linear infinite;
      &.load-btn1{
        top: 55rpx;
        left: calc(50% - 25rpx);
        background: url("@/static/pet-icon/baimao.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn2{
        top: 85rpx;
        left: calc(50% + 40rpx);
        background: url("@/static/pet-icon/bianmu.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn3{
        top: 150rpx;
        left: calc(50% + 75rpx);
        background: url("@/static/pet-icon/buoumao.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn4{
        top: 215rpx;
        left: calc(50% + 40rpx);
        background: url("@/static/pet-icon/cangao.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn5{
        top: 245rpx;
        left: calc(50% - 25rpx);
        background: url("@/static/pet-icon/cangshu.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn6{
        top: 215rpx;
        left: calc(50% - 90rpx);
        background: url("@/static/pet-icon/chaiquan.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn7{
        top: 150rpx;
        left: calc(50% - 125rpx);
        background: url("@/static/pet-icon/xianluomao.png") no-repeat;
        background-size: 100% 100%;
      }
      &.load-btn8{
        top: 85rpx;
        left: calc(50% - 90rpx);
        background: url("@/static/pet-icon/fadou.png") no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .load-text {
    color: #fff;
    text-align: center;
    span{
      display: inline-block;
      margin: 0 5rpx;
      animation: jump 1s infinite;
      &:nth-child(1) { animation-delay: 0s; }
      &:nth-child(2) { animation-delay: 0.1s; }
      &:nth-child(3) { animation-delay: 0.2s; }
      &:nth-child(4) { animation-delay: 0.3s; }
      &:nth-child(5) { animation-delay: 0.4s; }
      &:nth-child(6) { animation-delay: 0.5s; }
      &:nth-child(7) { animation-delay: 0.6s; }
      &:nth-child(8) { animation-delay: 0.7s; }
    }
  }
}
</style>